<template>
	<view class="content">
		<view class="total" v-if="list.length == 0">
			<view class="img">
				<image src="/static/totalBg.png" mode="widthFix"></image>
			</view>
			<view class="totalTxt">
				暂无公告
			</view>
		</view>
		<view class="notice" v-else>
			<view class="list" v-for="(item,index) in list" :key="index" @click="$framDate.navTo(`home/notice/desction?id=${item.id}`)">
				<view class="title">
					{{item.title}}
				</view>
				<view class="desc">
					<view class="desc_content">
						{{item.describe}}
					</view>
					<view class="desc_time">
						{{$framDate.to_timeStemp(item.createtime,2)}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				objPage:{
					page: 1,
					limit: 10
				},
				loading: true
			}
		},
		onLoad() {
			this.load()
		},
		onReachBottom() {
			if(!this.loading){
				return
			}
			this.objPage.page += 1;
			this.load();
		},
		methods: {
			async load() {
				if(!this.loading){
					return
				}
				let res = await this.api.uniRequ(this.api.common.informList,this.objPage,'get');
				if(res.code == 1){
					this.list = this.list.concat(res.data.data);
					if(this.objPage.limit != res.data.data.length){
						this.loading = false;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 90%;
		padding: 30rpx 5% 0 5%;
	}

	.list {
		width: 100%;
		height: 90rpx;
		border-bottom: 1px solid #eeeeee;
		padding: 21rpx 0;

		.title {
			width: 100%;
			height: 40rpx;
			line-height: 40rpx;
			overflow: hidden;
			font-size: 27rpx;
			color: #4B4E58;
			padding-bottom: 5rpx;
		}

		.desc {
			width: 100%;
			height: 40rpx;
			line-height: 40rpx;
			display: flex;
			font-size: 23rpx;
			padding-top: 5rpx;

			.desc_content {
				width: 70%;
				color: #9498A5;
			}

			.desc_time {
				width: 30%;
				color: #B6B6B6;
				text-align: right;
			}
		}
	}
</style>
